// flex box
@mixin flex-box($jc:space-between, $ai:center, $fd:row, $fw:nowrap) {
  display: flex;
  flex-flow: $fd $fw;
  align-items: $ai;
  justify-content: $jc;
}

// 清除浮动
@mixin clearfix {
  &::after {
    display: table;
    clear: both;
    content: '';
  }
}

// 多行隐藏
@mixin text-overflow($clamp:1) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: $clamp;
  -webkit-box-orient: vertical;
}

// 导航使用mixin开始
@mixin background-active {
  background: linear-gradient(90deg, #e6efff 0%, #edf3ff 9.64%, #f2f7ff 83.33%);
}

@mixin sub-background-active {
  background: linear-gradient(90deg, rgb(255 255 255 / 22%) 0%, rgb(255 255 255 / 13%) 100%);
}

@mixin vertical-common-active {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  content: '';
  background-color: #007af5;
  box-shadow: 6px 0 8px rgb(85 135 240 / 25%);
}

@mixin sub-vertical-common-active {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  content: '';
  background-color: #fff;
  box-shadow: 1px 0 5px rgb(85 135 240 / 25%);
}

@mixin horizontal-common-active {
  position: absolute;
  bottom: 4px;
  left: var(--maia-base-space);
  width: calc(100% - 24px);
  height: 2px;
  content: '';
  background-color: #007af5;
  box-shadow: 0 1px 3px rgb(20 116 243 / 30%);
}

@mixin sub-horizontal-common-active {
  position: absolute;
  bottom: 4px;
  left: var(--maia-base-space);
  width: calc(100% - 24px);
  height: 2px;
  content: '';
  background-color: #fff;
}
// 导航使用mixin结束
